<template>
  <div class="app-container">
    <el-card class="box-card" v-if="normalNode">
      <div slot="header" class="clearfix">
        <span class="el-icon-document">审批意见</span>
        <el-button style="float: right" type="primary" @click="goBack"
          >返回</el-button
        >
      </div>
      <el-col :span="16" :offset="4">
        <el-form
          ref="form"
          :model="commentForm"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="审批意见" prop="comment">
            <el-input
              type="textarea"
              :rows="3"
              v-model="commentForm.comment"
              clearable
              placeholder="请输入审批意见"
            />
          </el-form-item>
        </el-form>
        <div class="box-button">
          <el-button
            icon="el-icon-edit-outline"
            size="small"
            type="primary"
            @click="completeTask"
            >同意</el-button
          >
          <el-button
            icon="el-icon-refresh-left"
            size="small"
            type="warning"
            v-if="canReject"
            @click="rejectTask"
            >驳回</el-button
          >
          <el-button
            icon="el-icon-circle-close"
            size="small"
            type="danger"
            @click="stopProcess"
            >不同意</el-button
          >
        </div>
      </el-col>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-icon-document">表单信息</span>
      </div>
      <el-col :span="16" :offset="4">
        <el-row>
          <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"></v-form-render>
          <el-col v-if="!normalNode" :offset="6"><el-button type="warning" style="margin:auto" @click="submitForm">确认提交</el-button></el-col>
        </el-row>
      </el-col>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-icon-document">审批记录</span>
      </div>
      <el-col :span="16" :offset="4" v-if="flowRecordList">
        <task-record :flowRecordList.sync="flowRecordList"></task-record>
      </el-col>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-icon-document">流程图</span>
      </div>
      <div v-if="xmlData">
        <flow-view   :xmlData.sync="xmlData"   :taskList.sync="taskList"  ></flow-view>
      </div>
    </el-card>
  </div>
</template>
<script>

import FlowView from "../bpmn/FlowView";
import TaskRecord from "./taskRecord";
import {  getTask,  taskRecord,  completeTask,  rejectTask,  stopProcess,} from "@/api/flowable/task";
import { getDataByInstId } from "@/api/flowable/front";
import { setFieldsAuth } from "@/utils/index";

export default {
  name: "DealTask",
  components: { FlowView, TaskRecord },
  data() {
    return {
      // 遮罩层
      loading: true,
      taskId: this.$route.query.taskId,
      deployId: this.$route.query.deployId,
      procInstId: this.$route.query.procInstId,
      //表单
      formJson: {},
      formData: {},
      optionData: {},
      //流程图
      xmlData: "",
      taskList: {},
      flowRecordList: [],
      commentForm: {
        taskId: this.$route.query.taskId,
        comment: "",
      },
      // 表单校验
      rules: {
        comment: [
          { required: true, message: "请输入审批意见", trigger: "blur" },
        ],
      },
      nodeKey: "",
      normalNode: true,
      canReject: false,
      itemNum: 0,
    };
  },
  mounted() {
    // this.itemNum = getIdGlobal();
    this.itemNum = 1000;
    this.getTask();
  },
  methods: {
    /** 返回页面 */
    goBack() {
      // 关闭当前标签页并返回上个页面
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },
    getTask() {
      getTask(this.taskId).then((res) => {
        // console.log(res)
        this.nodeKey = res.data.taskDefinitionKey;
        if (res.data.processVariables.rejectNode) this.canReject = true;
        if (res.data.processVariables.rejectNode == this.nodeKey)
          this.normalNode = false;
        this.getDataByInstId();
      });
    },
    async getDataByInstId() {
      let res1 = await taskRecord(this.procInstId);
      let info = await getDataByInstId(this.procInstId);
      let appVersion = info.data.appVersion;
      let formVersion = info.data.formVersion;
      let bpmnConfig = info.data.bpmnConfig;
      let formData = info.data.formData;
      this.flowRecordList = res1.data.flowList;
      this.taskList = res1.data.elementList;
      this.xmlData = appVersion.bpmnXml;


      let nodeConfig = bpmnConfig ? JSON.parse(bpmnConfig.nodeConfig) : {};
      let authMap = {};
      if (!!nodeConfig && nodeConfig[this.nodeKey]) {
          authMap = nodeConfig[this.nodeKey];
      }

      let formContent = JSON.parse(formVersion.formContent);
      setFieldsAuth(formContent.widgetList, authMap);

      this.$refs.vFormRef.setFormJson(formContent)
      this.$nextTick(() => {
        this.$refs.vFormRef.setFormData(JSON.parse(formData.submitData))
      })


    },
    completeTask() {
      this.$refs.vFormRef.getFormData().then(formData => {
        this.$refs["form"].validate((valid) => {
          // console.log(formData, valid)
          if (valid) {
            this.$modal.confirm("您确认该操作？").then(() => {
              if (formData) this.commentForm.formData = formData;
              completeTask(this.commentForm).then((res) => {
                this.$modal.msgSuccess(res.msg);
                this.goBack();
              });
            });
          }
        })
      }).catch(error => {
        // Form Validation failed
        this.$message.error(error)
      })
    },
    stopProcess() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$modal.confirm("您确认该操作？").then(() => {
            stopProcess(this.commentForm).then((res) => {
              this.$modal.msgSuccess(res.msg);
              this.goBack();
            });
          });
        }
      });
    },
    rejectTask() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$modal.confirm("您确认该操作？").then(() => {
            rejectTask(this.commentForm).then((res) => {
              this.$modal.msgSuccess(res.msg);
              this.goBack();
            });
          });
        }
      });
    },
    submitForm(data) {
      // console.log(data);
      this.commentForm.comment = "发起者修改";
      this.$refs.vFormRef.getFormData().then(formData => {
        this.$modal.confirm("您确认该操作？").then(() => {
          if (formData) this.commentForm.formData = formData;
          completeTask(this.commentForm).then((res) => {
            this.$modal.msgSuccess(res.msg);
            this.goBack();
          });
        });
      }).catch(error => {
        // Form Validation failed
        this.$message.error(error)
      })
    },
  }
};
</script>
<style scoped>
.box-card {
  margin-bottom: 10px;
  width: 87vw;
}
.box-button {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
}
</style>
